@extends('admin.common.base-master')

@section('html-head')

@endsection

@section('html-body')
    <div id="content">
        <!-- cur-position start -->
        <div id="cur-position">
            <span class="tit">当前位置：</span>
            <a href="{{route('Admin.Home.bannerList')}}">漫画列表</a>
        </div>

        <div class="filter-box clearfix">

            <div class="fr">
                <a class="addBtn" href="javascript:;" onclick="upPop()">新增</a>
            </div>
        </div>
        <div class="table-box">
            <table class="table">
                <thead>
                <tr>
                    <th>ID</th>
                    <th>内容图片</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                @if(count($comics) > 0)
                    @foreach($comics as $comic)
                        <tr id="comic_{{$comic->id}}">
                            <td>{{$comic->id}}</td>
                            <td class="account-td" style="width: 5%;">
                                <span class="photo" style="border-radius: 100%;display:initial">
                                    @if($comic->img_id !== 0)
                                        <a href="javascript:void(0);" class="openimg" data-key="{{$comic->img_id}}"><img src="{{route("Api.File.showImageById",["id"=>$comic->img_id])}}" alt=""></a>
                                    @else
                                        <img src="{{url('images/default-avatar.png')}}" alt="">
                                    @endif
                                </span>
                            </td>
                            <td><a href="javascript:void(0);" class="del" data-id="{{$comic->id}}">删除 </a></td>
                        </tr>
                    @endforeach
                @endif
                </tbody>
            </table>
        </div>
    </div>
    <div class="upPop-box">
        <div class="backdrop"></div>
        <div id="upPop" class="info-pop tixian">
            <a class="close" href="javascript:void(0);"></a>
            <h3>新增漫画内容</h3>

            <div class="fill-list">
                <span class="fill-tit">漫画内容：</span>
                <button id="inputImage">添加图片</button>
                <input id="img_id" type="hidden" name="img_id" value="" />
                <div id="upload_msg" style="text-align: center">等待上传</div>
            </div>

            <input type="hidden" name="cid" id="cid" value="">
            <div class="fill-list">
                <span class="fill-tit">&nbsp;</span>
                <input class="fill-submit" type="button" id="subThisForm" value="提交">
            </div>
        </div>
    </div>

    <script>
        function upPop() {
            $('.upPop-box').upPop();
        }

        $(function(){
            $(document).on("click",".del",function(){
                var id = $(this).attr("data-id");
                $.ajax({
                    url:'{{route("Api.Admin.Comic.delComicImg")}}',
                    type:'post',
                    dataType:'json',
                    data:{id:id},
                    success:function(obj){
                        if(obj.level == "success"){
                            $("#comic_"+id).hide('slow');
                        }else{
                            noty({type:obj.level,text:obj.message,timeout:600});
                        }
                    },
                    error:function(obj){
                        console.log(obj);
                    }

                });
            });

            $(document).on("click","#subThisForm",function(){
                var cid    = '{{$comic_id}}';
                var img_id = $("#img_id").val();
                $.ajax({
                    url:'{{route("Api.Admin.Comic.setComicImg")}}',
                    type:'post',
                    dataType:'json',
                    data:{id:cid,img_id:img_id},
                    success:function(obj){
                        if(obj.level == "success"){
                            noty({
                                text: obj.message, type: obj.level, timeout: 600,
                                callback: {
                                    afterClose:function(){
                                        window.location.reload();
                                    }
                                }
                            });
                        }else{
                            noty({type:obj.level,text:obj.message,timeout:600});
                        }
                    },
                    error:function(obj){
                        console.log(obj);
                    }

                });
            });

            //缩略图上传代码
            var uploader = new plupload.Uploader({
                runtimes: 'html5,flash,silverlight,html4',
                browse_button: 'inputImage',
                url: '{{route("Api.File.upload")}}',

                chunk_size: '20mb',
                filters: {
                    max_file_size: '5mb',
                    mime_types: [
                        {title: "Image files", extensions: "jpg,gif,png"}
                    ],
                    prevent_duplicates: false
                },
                multi_selection: true,
                unique_names: true,

                flash_swf_url: '{{ url('vendor/plupload-2.1.2/Moxie.swf') }}',
                silverlight_xap_url: '{{ url('vendor/plupload-2.1.2/Moxie.xap') }}',

                file_data_name: 'photo',
                headers: {
                    Accept: 'application/json'
                },

                multipart_params: {},

                init: {
                    PostInit: function () {
                    },

                    FilesAdded: function (up, files) {
                        up.start();
                    },

                    BeforeUpload: function (up, file) {
                        up.settings.multipart_params.file_name = file.name;
                    },

                    UploadProgress: function (up, file) {
                        $('#upload_msg').html('<span style="color:red">上传中...</span>');
                    },

                    Error: function (up, err) {
                        var responseObj = '', responseMessage = '';
                        try {
                            responseObj = $.parseJSON(err.response);
                            responseMessage = responseObj.message;
                        } catch ($e) {

                        }

                        noty({
                            type: 'error',
                            text: err.message + ' ' + responseMessage,
                            timeout: 800
                        });
                    },

                    FileUploaded: function (up, file, info) {
                        var responseObj = '', responseMessage = '';
                        try {
                            responseObj = $.parseJSON(info.response);
                            responseMessage = responseObj.message;
                        } catch ($e) {

                        }
                        if (responseObj.level == "success") {
                            $('#img_id').val(responseObj.data.id);
                            // var imgURL = responseObj.data.img_url + "?" + Math.random();
                            // $('#img_show').attr("src",imgURL);
                            $('#upload_msg').html('<span style="color:green">上传成功</span>');
                        } else {
                            noty({type: responseObj.level, text: responseObj.message, timeout: 800});
                            $('#upload_msg').html('<span style="color: red">上传失败，请重新上传！</span>');
                        }

                    }
                }
            });
            uploader.init();
        });
    </script>
@endsection